<template>
    <div class="public_main_style">
        <div class="public_main_head search-wrap">
            <el-collapse>
                <el-collapse-item>
                    <template slot="title">
                        <span class="fz-14">搜索选项</span>
                    </template>
                    <el-form :model="filters" label-width="100px" inline @submit.native.prevent>
                        <el-row align="middle" type="flex">
                            <el-col :span="8">
                                <el-form-item label="字典id:">
                                    <el-input
                                            size="small"
                                            v-model="filters.dictId"
                                            placeholder="输入字典id进行搜索"
                                            clearable
                                    />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="字典标签:">
                                    <el-input
                                            size="small"
                                            v-model="filters.label"
                                            placeholder="请输入字典标签"
                                            clearable
                                    />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="字典值:">
                                    <el-input
                                            size="small"
                                            v-model="filters.value"
                                            placeholder="请输入字典值"
                                            clearable
                                    />
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row type="flex" align="middle">
                            <el-col :span="8">
                                <el-form-item label="备注信息:">
                                    <el-input
                                            size="small"
                                            v-model="filters.remarks"
                                            placeholder="请输入备注信息"
                                            clearable
                                    />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="状态:">
                                    <el-radio-group v-model="filters.status" size="small">
                                        <el-radio label="0">正常</el-radio>
                                        <el-radio label="1">禁用</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="类型:">
                                    <el-input
                                            size="small"
                                            v-model="filters.type"
                                            placeholder="请输入字典类型"
                                            clearable
                                    />
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row align="middle" type="flex" justify="center">
                            <el-col :span="3">
                                <el-form-item>
                                    <el-button
                                            style="width:100%"
                                            type="primary"
                                            size="small"
                                            @click="updataTableList(1)"
                                            icon="el-icon-search">搜索
                                    </el-button>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </el-collapse-item>
            </el-collapse>
        </div>
        <ETable ref="table" :columns="tableHead" :getData="getDictList">
            <template slot="head">
                <el-button
                        @click="editDict"
                        type="primary"
                        size="small"
                        icon="el-icon-circle-plus"
                >
                    新增字典
                </el-button>
                <el-button
                        icon="el-icon-refresh"
                        type="success"
                        size="small"
                        @click="cacheRefresh"
                >
                    字典缓存刷新
                </el-button>
                <!-- <el-button
                  type="primary"
                  size="small"
                  @click="onSwitchSearch('0')"
                >
                  显示油站搜索框
                </el-button>
                <el-button
                  type="primary"
                  size="small"
                  @click="onSwitchSearch('1')"
                >
                  隐藏油站搜索框
                </el-button> -->
                <!-- <el-row type="flex" justify="space-between">
                  <el-col :span="10">
                    <el-button
                      @click="editDict"
                      type="primary"
                      size="small"
                      icon="el-icon-circle-plus"
                    >
                      新增字典
                    </el-button>
                  </el-col>
                  <el-col :span="2">
                    <el-button
                      icon="el-icon-refresh"
                      type="success"
                      size="small"
                      @click="cacheAreaRefresh"
                    >
                      地区缓存刷新
                    </el-button>
                  </el-col>
                  <el-col :span="2">
                    <el-button
                      icon="el-icon-refresh"
                      type="success"
                      size="small"
                      @click="cacheRefresh"
                    >
                      字典缓存刷新
                    </el-button>
                  </el-col>
                </el-row> -->
            </template>
            <template slot="userStatus" slot-scope="{ row }">
                <el-tag
                        size="small"
                        :type="row.staus ? 'danger' : 'primary'"
                >{{ row.status | userStatus }}
                </el-tag>
            </template>
            <template slot="handler" slot-scope="{ row }">
                <el-button
                        size="mini"
                        type="primary"
                        @click="editDict(row)">修改
                </el-button>
                <el-button
                        size="mini"
                        class="ml10"
                        type="danger"
                        @click="deleteDict(row)">删除
                </el-button>
            </template>
        </ETable>
        <dictModel ref="dictModel" :ModelData="ModelData" @refresh="updataTableList"/>
        <!-- 缓存秒杀信息弹框 -->
        <el-dialog
                :title="`秒杀${cacheDateType == 'goods' ? '商品' : '时间'}缓存`"
                :close-on-click-Model="false"
                :visible.sync="showCacheDialog"
                @close="cancelCacheDialog"
                width="400px"
        >
            <div class="wrap" v-loading="cacheLoading" element-loading-text="加载中...">
                <el-form ref="cacheFormRef" :model="cacheForm" label-width="90px">
                    <el-form-item label="日期:" :required="true">
                        <el-date-picker
                                size="small"
                                v-model="cacheForm.cacheDate"
                                value-format="yyyy-MM-dd"
                                type="date"
                                clearable
                                placeholder="选择日期"/>
                    </el-form-item>
                </el-form>
            </div>
            <div slot="footer" class="footer_dialog">
                <el-button size="small" @click="cancelCacheDialog">取消</el-button>
                <el-button
                        size="small"
                        type="primary"
                        v-loading="cacheLoading"
                        @click="onCacheSeckill">确定
                </el-button>
            </div>
        </el-dialog>
        <!-- 补偿弹框 -->
        <el-dialog
                title="数据补偿"
                :close-on-click-Model="false"
                :visible.sync="showCompensateDialog"
                @close="cancelCompensateDialog"
                width="400px"
        >
            <div class="wrap" v-loading="compensateLoading" element-loading-text="数据提交中...">
                <el-form ref="compensateFormRef" :model="compensateForm" label-width="90px">
                    <el-form-item label="月份:" :required="true">
                        <el-date-picker
                                size="small"
                                v-model="compensateForm.date"
                                value-format="yyyy-MM"
                                type="month"
                                clearable
                                placeholder="选择月份"/>
                    </el-form-item>
                </el-form>
            </div>
            <div slot="footer" class="footer_dialog">
                <el-button size="small" @click="cancelCompensateDialog">取消</el-button>
                <el-button
                        size="small"
                        type="primary"
                        v-loading="compensateLoading"
                        @click="onCompensateOperation">确定
                </el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import dictModel from './components/dictModel'
    import {_getDict, _deleteDict, _cacheDict} from '_api'

    export default {
        components: {
            dictModel
        },

        data() {
            return {
                cacheDateType: 'time',
                cacheLoading: false,
                showCacheDialog: false,
                cacheForm: {
                    cacheDate: ''
                },
                compensateDatetype: 'income',
                showCompensateDialog: false,
                compensateLoading: false,
                compensateForm: {
                    date: ''
                },
                dictArray: [],
                filters: {
                    dictId: '',
                    label: '',
                    level: '',
                    remarks: '',
                    status: '',
                    type: '',
                    value: ''
                },
                tableHead: [
                    {
                        label: '字典id',
                        prop: 'dictId'
                    },
                    {
                        prop: 'type',
                        label: '字典类型'
                    },
                    {
                        prop: 'label',
                        label: '字典标签'
                    },
                    {
                        prop: 'value',
                        label: '字典值'
                    },
                    {
                        prop: 'level',
                        label: '权重'
                    },
                    {
                        prop: 'remarks',
                        label: '备注'
                    },
                    {
                        prop: 'status',
                        label: '状态',
                        slotName: 'userStatus',
                    },
                    {
                        label: '操作',
                        slotName: 'handler',
                    }
                ],
                ModelData: {}
            }
        },
        methods: {
            async getDictList(arg) {
                return (await _getDict({...arg, ...this.filters}));
            },
            // 缓存刷新字典
            cacheRefresh() {
                this.$refs.table.loading = true
                _cacheDict().then(res => {
                    this.$message.success(res.msg)
                    this.updataTableList()
                }).catch(() => {
                    this.$refs.table.loading = false
                })
            },
            // 切换搜索显示框
            onSwitchSearch(status) {
                this.$http.post('/cms/auth/search/setIsSearch', status).then(res => {
                    console.log('onSwitchSearch', res.data)
                })
            },
            // 缓存类型
            onCacheDate(type) {
                this.cacheDateType = type
                this.showCacheDialog = true
            },
            // 关闭秒杀弹框
            cancelCacheDialog() {
                this.cacheLoading = false
                this.showCacheDialog = false
                this.$refs.cacheFormRef.resetFields()
            },
            // 缓存秒杀信息
            onCacheSeckill() {
                this.cacheLoading = true
                console.log('this.cacheForm', this.cacheForm)
                this.$refs.cacheFormRef.validate((valid) => {
                    if (valid) {
                        let requestUrl
                        if (this.cacheDateType == 'goods') {
                            requestUrl = '/cms/auth/shopping/mall/goods/cacheSeckillOrderInventory'
                        } else {
                            requestUrl = '/cms/auth/shopping/mall/seckill/time/cacheSeckillTime'
                        }
                        this.$http.post(requestUrl, this.cacheForm.cacheDate).then(res => {
                            this.$message.success(res.msg)
                            this.cancelCacheDialog()
                        }).catch(() => {
                            this.cacheLoading = false
                        })
                    }
                })
            },
            // 运营中心数据补偿类型
            onCompensateDate(type) {
                this.compensateDatetype = type
                this.showCompensateDialog = true
            },
            // 关闭运营中心补偿弹框
            cancelCompensateDialog() {
                this.compensateLoading = false
                this.showCompensateDialog = false
                this.$refs.compensateFormRef.resetFields()
            },
            // 运营中心补偿
            onCompensateOperation() {
                this.compensateLoading = true
                this.$refs.compensateFormRef.validate((valid) => {
                    if (valid) {
                        this.$http.post(`/cms/auth/operation/center/${this.compensateDatetype}/count/dataCompensate`, this.compensateForm.date).then(res => {
                            this.$message.success(res.msg)
                            this.cancelCompensateDialog()
                        }).catch(() => {
                            this.compensateLoading = false
                        })
                    }
                })
            },
            // 修改或新增字典
            editDict(row) {
                if (row && row.dictId) {
                    this.ModelData = row
                } else {
                    this.ModelData = null
                }
                this.$refs.dictModel.showEditModel = true
            },
            deleteDict(row) {
                this.$confirm('确定要删除这个字典表吗？', '删除', {
                    confirmButtonText: '删除',
                    cancelButtonText: '取消',
                    type: 'warning',
                    closeOnClickModel: false,
                }).then(() => {
                    this.$refs.table.loading = true
                    _deleteDict(row.dictId).then(res => {
                        this.updataTableList()
                        this.$message.success(res.msg)
                    }).catch(() => {
                        this.$refs.table.loading = false
                    })
                })
            },
            updataTableList(pageIndex) {
                this.$refs.table.updateTable(pageIndex)
            }
        }
    }
</script>

<style lang="less" scoped>
    .fz-14 {
        font-size: 14px;
    }

    // /deep/.el-form-item__content {
    //   width: 100%;
    // }
    .search-wrap {
        padding: 10px 15px;
        // /deep/.el-form-item {
        //   width: 100%;
        // }
    }
</style>
